<template>
  <div id="UpdatePhone">
       <!--    导航栏 -->
         <van-nav-bar
            title="手机号码修改"
            left-arrow
            :fixed=true
            :border=true
            @click-left="$router.go(-1)"
         ></van-nav-bar>
         <div style="margin-top:3rem;">

              <van-field
                v-model="phone"
                name="手机号码"
                label="手机号码"
                type="tel"
                placeholder="请输入新手机号码"
              />
              <div style="margin: 16px;">
                <van-button round block type="primary" @click="onSubmit()">
                  更新保存
                </van-button>
              </div>
         </div>
  </div>
</template>

<script>
import { DatetimePicker, NoticeBar ,Toast} from 'vant'
import { getUserByPhone,UpdateUserPhone } from './../../../../service/api/index.js'
import {mapState,mapMutations} from 'vuex'
  export default{
     name:"Pay",
     data(){
         return{
            phone:'',
         }
     },
      
      mounted(){
        //console.log(this.$route);
        // console.log(this.userInfo.token)
      },

      computed:{
          ...mapState(["userInfo"]),

     },
     methods:{
      ...mapMutations(['UPDATE_MOBILE']),

         async onSubmit() {
         // //   console.log(this.userInfo.token);
         //  // console.log(this.name);
         //     let result = await getUserByName(this.name);
         //    // console.log(result.status);
         //      //判断用户名是否存在
         //        if (result.status==='200') {
         //           Toast.fail('该用户名已存在，请重新输入!'); 
         //           return ;
         //       };
         //       //判断输入用户名是否为空
         //      if (this.name==='') {
         //          Toast.fail('用户名不能为空');
         //           return ;
         //      };
         //      //修改用户名
         //       let res = await UpdateUserName(this.userInfo.token,this.name);
         //       console.log(res);
         //       if (res.status==='200') {
         //           //提示更新更改
         //          Toast.success('更新成功');
         //          //保存本地  
         //          let name = this.name;
         //         //  console.log(name);
         //           this.UPDATE_NAME({name});
                   if (this.phone.length===0) {
                      Toast.fail('手机号码不能为空!'); 
                      return ;
                   };
                   if (this.phone.length!=11) {
                      Toast.fail('请输入有效的手机号码!');
                      return ;
                   };
                   let  myreg =/^1[3,5,7,8]\d{9}$/;
                    if (!myreg.test(this.phone)) {
                       Toast.fail('请输入有效的手机号码!');
                       return ;
                    };
                   let result = await getUserByPhone(this.phone);
                   if (result.status==='200') {
                    Toast.fail('该手机号码已存在，请重新输入!'); 
                    return ;
                  };
    
                 let res = await UpdateUserPhone(this.userInfo.token,this.phone);
                 // console.log(res);
                 if (res.status==='200') {
                     //提示更新更改
                    Toast.success('更新成功');
                    //保存本地  
                    let mobile = this.phone;
                   //  console.log(name);
                     this.UPDATE_MOBILE({mobile});           
                 }
         },

          
     }

  }
</script>


<style lang="less" scoped>
     #UpdatePhone{
      position:fixed;
      top:0;
      left:0;
      bottom:0;
      right:0;
      background-color:#f5f5f5;
      z-index:200;
      overflow-y: scroll;

     }


    .router-slider-enter-active,.router-slider-leave-active{
      transition:all 0.3s;
    }

    .router-slider-enter,.router-slider-leave-active{
      transform:translate3d(2rem,0,0);
      opacity:0;
    }
</style>